import createGenerateClassName from "@material-ui/core/styles/createGenerateClassName";
import jssPreset from "@material-ui/core/styles/jssPreset";
import createHashHistory from "history/createHashHistory";
import {create} from "jss";
import * as React from "react";
import JssProvider from "react-jss/lib/JssProvider";
import {HashRouter, Route, Router, Switch} from "react-router-dom";
import "./App.css";
import AuthRoute from "./component/AuthRoute";
import Footer from "./views/layout/Footer";
import {Login, Register} from "./router/RouterComponent"
import MainIndex from "./views/layout/MainIndex";

/**
 * 使用material-ui的jss in js 解决方案
 */
const generateClassName = createGenerateClassName();
const jss = create(jssPreset());
const hashHistory = createHashHistory();

/**
 * @constructor {
 *   采用react-router配置的方式来控制路由，将路由配置分离开来
 *   JssProvider是material-ui的css-in-js组件，使用这个才不会导致生产环境和线上环境不一样
 * }
 *  线上环境最好用BowerRouter
 * @return JSX.Element
 */
class App extends React.Component {
    public render() {
        return (
            <div className="App">
                <JssProvider jss={jss} generateClassName={generateClassName}>
                    <HashRouter>
                        <Router history={hashHistory}>
                            <Switch>
                                <Route path={"/login"} component={Login}/>
                                <Route path={"/register"} component={Register}/>
                                <AuthRoute component={Footer} path={"/sun"}/>
                                <Route path={"/"} component={MainIndex}/>
                            </Switch>
                        </Router>
                    </HashRouter>
                </JssProvider>
            </div>
        );
    }
}

export default App;
